<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人分类汇总报表</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f7fa;
            margin: 0;
            padding: 20px;
        }
        
        .report-container {
            max-width: 900px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-weight: 600;
            position: relative;
            padding-bottom: 15px;
        }
        
        h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
            border-radius: 3px;
        }
        
        #barChartDiv {
            width: 100%;
            height: 500px;
            margin: 30px auto;
            transition: all 0.3s ease;
        }
        
        #barChartDiv:hover {
            transform: translateY(-5px);
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #888;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="report-container">
    <h2>联系人分类汇总柱状图</h2>

    <div id="barChartDiv"></div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />

<script th:inline="javascript">
    /*<![CDATA[*/
    // 获取后端传递的数据
    const categories = [];
    const dataCountByCategory = [[${dataCountByCategory}]];

    // 将 List<Map<String, Integer>> 转换成 ECharts 饼图需要的格式
    const pieData = [];

    for (let i = 0; i < dataCountByCategory.length; i++) {
        const item = dataCountByCategory[i];
        console.log(item);
        const key = Object.keys(item)[0];
        const name = item[Object.keys(item)[1]]
        categories.push(name);
        const value = item[key];
        pieData.push({
            name: name,
            value: value
        });
    }

    // 初始化 ECharts 实例
    const barChart = echarts.init(document.getElementById('barChartDiv'));

    // 配置项 - 添加了更丰富的效果
    const barOption = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                shadowStyle: {
                    color: 'rgba(0, 0, 0, 0.1)'
                }
            },
            formatter: '{b}: {c} 个联系人'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: categories,
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                rotate: 30,
                color: '#666'
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0'
                }
            }
        },
        series: [
            {
                name: '联系人数量',
                type: 'bar',
                barWidth: '60%',
                data: pieData,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#0078ff' }
                    ]),
                    borderRadius: [4, 4, 0, 0],
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10,
                    shadowOffsetY: 5
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ff9a9e' },
                            { offset: 0.5, color: '#fad0c4' },
                            { offset: 1, color: '#fad0c4' }
                        ])
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    color: '#333',
                    fontWeight: 'bold',
                    formatter: '{c}'
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return idx * 100;
                }
            }
        ]
    };

    // 使用配置项
    barChart.setOption(barOption);
    
    // 添加窗口大小变化时的响应式效果
    window.addEventListener('resize', function() {
        barChart.resize();
    });
    
    // 添加鼠标悬停时的动画效果
    let currentIndex = -1;
    setInterval(function () {
        var dataLen = pieData.length;
        // 取消之前高亮的图形
        barChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        barChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        // 显示 tooltip
        barChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
    }, 3000);
    /*]]>*/
</script>
</body>
</html>